import React from 'react';

import Header from '../common/Header';
import CKTable from '../components/CKTable';
import CKModal from '../components/CKModal';
import CKPages from '../components/CKPages';
import moment from 'moment';

import AMUIReact,{
	Button,
	Input,
	Form,
	Grid,
	Col,
	Tabs,
	Popover,
	PopoverTrigger,
} from 'amazeui-react';

import Fetch from '../common/Fetch';
import '../assets/css/manage/article.less';
class ArticleManages extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			data:null,
			currentPage:parseInt(this.props.params.id) || 1,
			dataCount:1,
			pageNum:10,
			area: 1,
			color: '#0e90d2',
			text: '编辑区'
		};
		this.move_area = '';
	}

	componentDidMount() {
		this.loadArticleList(this.state.currentPage, 1);
	}

	/**
	 * 加载文章分页列表
	 * @param page
	 */
	loadArticleList(page, area) {
		this.refs.modal.load('正在获取数据中...');
		Fetch('/cms/article_manage/query',{query:this.getCondition(),page:page,num:this.state.pageNum, area: area},(res)=>{
			if (res.status) {
				this.setState({
					data:res.data.data.length>0 ? res.data.data : null,
					currentPage:page,
					dataCount:res.data.count
				});
				this.refs.modal.closeModal();
			} else {
				this.refs.modal.alert('提示','没有任何数据!');
			}
		},(e)=>{
			this.refs.modal.alert('提示','获取数据出错');
		});
	}

	/**
	 * 获取搜索条件
	 * @returns {{acc_username: {type: string, name: string, value: string}}}
	 */
	getCondition() {
		let query = {
			acc_username:{
				type:'like',
				name:'art_title',
				value:this.refs.query_art_title.getValue()+'%'
			}
		};
		return query;
	}

	/**
	 * 点击搜索
	 */
	getSelect = ()=>{
		this.loadArticleList(1, this.state.area);
	};

	/**
	 * 添加文章
	 * @returns {XML}
	 */
	goNewArticle = ()=>{
		// this.context.router.push('/article_edit');
		this.context.router.push({
			pathname: '/article_edit/',
			query   : {area:this.state.area}
		});
	};

	/**
	 * 修改文章
	 * @returns {XML}
	 */
	editArticle = (row)=>{
		this.context.router.push('/article_edit/'+row.cipher_id);
	};

	/**
	 * 删除文章
	 * @returns {XML}
	 */
	delArticle = (row)=>{
		this.refs.modal.confirm('警告','你是否要删除 “ '+row['art_title']+' ” ?',()=>{
			Fetch('/cms/article_manage/del_article',{id:row['art_id']},(res)=>{
				if (res.status) {
					this.refs.modal.alert('提示','删除成功!',()=>{
						this.context.router.push('/article_manage');
					});
				} else {
					this.refs.modal.alert('错误','删除文章失败!');
				}
			});
		});
	};

	/**
	 * 切换文章分区
	 * @param row
	 * @returns {function(*)}
	 */
	changeArea = (row) => {
		//1为编辑区，2为发布区，3为已发布区
		if (row == 1) {
			this.setState({color:'#0e90d2',text:'编辑区',area: row});
		} else if (row == 2) {
			this.setState({color:'#3bb4f2',text:'发布区',area: row});
		} else if (row == 3) {
			this.setState({color:'#F37B1D',text:'已发布区',area: row});
		}
		this.loadArticleList(1, row);
	};


	moveArea(row) {
		return (e)=>{
			this.move_area = row;
			this.changeAreaStatus();
		};
	};

	changeAreaStatus() {
		if(this.move_area == '') return;
		let select_all = this.refs.table.getSelectRows();
		let select_arr = [];
		select_all.forEach(function (item, key) {
			select_arr.push(item.art_id);
		});
		let select_option=select_arr.join(',');
		if(select_option.trim().length==0){
			this.refs.modal.alert('警告', '未选择任何数据');
			return false;
		}else{
			//1为编辑区，2为发布区，3为已发布区
			let area_text = '编辑区';
			if (this.move_area == 1) {
				area_text = '编辑区';
			} else if (this.move_area == 2) {
				area_text = '发布区';
			} else if (this.move_area == 3) {
				area_text = '已发布区';
			}
			this.refs.modal.confirm('警告', "确定要把选中的文章移动到 “ " + area_text + " ”？", ()=> {
				Fetch('/cms/article_manage/change_area', {art_ids: select_option,area_id: this.move_area}, (res)=> {
					if (res.status) {
						this.refs.modal.alert('提示', '移动成功!', ()=> {
							this.loadArticleList(1, this.state.area)
						});

					} else {
						this.refs.modal.alert('提示', '移动失败');
					}
				}, (e)=> {
					this.refs.modal.alert('提示', '请求错误');
				});
			});
		}
	};

	render() {
		return (
			<div className="content">
				<Header title={"文章管理 -> " + this.state.text}/>
				<div className="content_main" style={{marginTop:"20px"}}>
					<div className="set_div_but" style={{width:"100%"}}>
					</div>
					<p>{this.renderTabs()}</p>
					<p>
						<h4 className="title">查询条件</h4>
					</p>
					<p>
						<Form inline>
							<Input ref="query_art_title" placeholder="文章标题" />
							{'\u00a0'}
							<Button amStyle="primary" onClick={this.getSelect}>搜索</Button>
						</Form>
					</p>
					<p>
						<Button amStyle="primary" onClick={this.goNewArticle}>新增文章</Button>
					</p>
					<p>
						<h4 className="title">{'文章列表 -> ' + this.state.text}</h4>
					</p>
					<p>
						{this.state.data ? this.renderTable():this.renderNotData()}
					</p>
				</div>
				<CKModal ref="modal"/>
			</div>
		);
	}

	renderTabs() {
		return (
			<Tabs defaultActiveKey={this.state.area} onSelect={this.changeArea}>
				<Tabs.Item eventKey={1} title="编辑区">
				</Tabs.Item>
				<Tabs.Item eventKey={2} title="发布区">
				</Tabs.Item>
				<Tabs.Item eventKey={3} title="已发布区">
				</Tabs.Item>
			</Tabs>
		);
	};

	renderTable() {
		return (
			<div>
				<CKTable ref="table" data={this.state.data} center
						 onRefresh={()=>this.loadArticleList(1, this.state.area)}>
					<CKTable.Header text="ID" field="art_id"/>
					<CKTable.Header text="文章标题" field="art_title"/>
					<CKTable.Header text="文章类型" field="art_type_text"/>
					<CKTable.Header text="文章分类" field="ctg_name"/>
					<CKTable.Header text="创建时间" field="art_created_date" onFormat={(val)=>{
						return moment.unix(val).format('YYYY-MM-DD HH:mm:ss')
					}}/>
					<CKTable.Header text="操作">
						<Button onClick={this.editArticle} amSize="xs" amStyle="primary">编辑</Button>
						{'\u00a0'}
						<Button onClick={this.delArticle} amSize="xs" amStyle="danger">删除</Button>
					</CKTable.Header>
				</CKTable>
				<div>
					移动到{'\u00a0'} : {'\u00a0'}
					<Button
						amStyle="primary"
						amSize="xs"
						onClick={this.moveArea(1)}
						disabled={this.state.area == 1}>
						编辑区
					</Button>
					{'\u00a0'}
					<Button
						amStyle="secondary"
						amSize="xs"
						onClick={this.moveArea(2)}
						disabled={this.state.area == 2}>
						发布区
					</Button>
					{'\u00a0'}
					<Button
						amStyle="warning"
						amSize="xs"
						onClick={this.moveArea(3)}
						disabled={this.state.area == 3}>
						已发布区
					</Button>
				</div>
				<CKPages current={this.state.currentPage}
						 number={this.state.pageNum}
						 count={this.state.dataCount}
						 onSelect={(page)=>{this.loadUserList(page)}}/>
			</div>
		);
	}

	renderNotData() {
		return (
			<div style={{textAlign:'center',fontSize:'24px',paddingTop:'200px'}}>
				没有数据
			</div>
		);
	}
}

ArticleManages.contextTypes = {
	router: React.PropTypes.object
};

export default ArticleManages;